<!-- 个人中心页 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<title>Document</title>
</head>

<body>
	<!-- <script src="/demos/googlegg.js"></script> -->

	<link href="../public/stylesheets/personal.css" rel="stylesheet" type="text/css">
	<div class="perdiv">
		<div class="o-m">
			<div class="ul-o">
				<ul>
					<li class="li-o"><span></span>
						<p>个人资料</p>
						<div class="clear"></div><b></b>
					</li>
					<li class="li-t"><span></span>
						<p>安全中心</p>
						<div class="clear"></div><b></b>
					</li>
					<li class="li-s"><span></span>
						<p>地址管理</p>
						<div class="clear"></div><b></b>
					</li>
					<li class="li-f"><span></span>
						<p>账号绑定</p>
						<div class="clear"></div><b></b>
					</li>
					<li class="li-w"><span></span>
						<p>会员中心</p>
						<div class="clear"></div><b></b>
					</li>
					<!-- <li class="li-l"><span></span>
						<p>强化维系客户，利润持续增长</p>
						<div class="clear"></div><b></b>
					</li> -->
					<div class="li-mask"></div>
				</ul>
			</div>
			<div class="ul-t">
				<li style="display:block">
					<div class="li-top">
						<h1>个人资料</h1>
						<hr>
						<table class="table-p">
							<tr>
								<td style="font-weight: 500; font-size: 20px;">姓名:</td>
								<td><input type="text" name="personName" maxlength="8"
										style=" height: 25px;width: 180px; border: #ccc solid 1px;" /></td>
							</tr>
							<tr>
								<td style="font-weight: 500; font-size: 20px;">性别:</td>
								<td>
									<input type="radio" id="man" name="gender" style="height: 25px;width: 18px; "
										checked="checked"><label for="man">男</label>
									<input type="radio" id="woman" name="gender"
										style="height: 25px;width: 18px; margin-left: 80px;"><label
										for="woman">女</label>
								</td>
							</tr>
							<tr>
								<td style="font-weight: 500; font-size: 20px;">生日:</td>
								<td><input type="date" style="height: 25px;width: 180px; border: #ccc solid 1px;"></td>
							</tr>
							<tr>
								<td style="font-weight: 500; font-size: 20px;">身高:</td>
								<td><input type="text" style="height: 25px;width: 180px; border: #ccc solid 1px;"></td>
							</tr>
							<tr>
								<td style="font-weight: 500; font-size: 20px;">体重:</td>
								<td><input type="text" style="height: 25px;width: 180px; border: #ccc solid 1px;"></td>
							</tr>
						</table>
					</div>
				</li>
				<li>
					<div class="li-top">
						<h1>安全中心</h1>
						<hr>

						<hr>
						<h3>邮箱</h3>
						<input type="button" value="立即关联"
							style="border: #000 solid 1px; width: 150px; height: 50px;background-color: #fff;">
						<div class="li-yx">
							<input type="email" style=" height: 40px;width: 260px; border: #ccc solid 1px;">
							<p>输入新邮箱地址-点击【确定】-在新邮箱中收到授权邮件-点击【确认绑定】授权， 即可与当前邮箱解除关联并绑定新的邮箱*</p>
							<input type="button" value="取消"
								style="border: #000 solid 1px; width: 100px; height:30px;background-color: #fff;">
							<input type="button" value="确定"
								style="border: #000 solid 1px;color: #fff; width: 100px; height:30px;background-color: #000;">
						</div>
					</div>
				</li>
				<li>
					<div class="li-top">
						<h1>地址管理</h1>
						<hr>

						<hr>
						<!-- 触发模态框的按钮 -->
						<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"
							style="background-color: #fff;color: #000; ">
							新增收货地址
						</button>
						<!-- 模态框 -->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h3 class="modal-title" id="myModalLabel">新增收货地址</h3>
									</div>
									<div class="modal-body">
										<p>收货人*</p>
										<input type="text"
											style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 160px;height: 40px;">
										<p>所在地区*</p>
										<div class="diqu_div">

											<select class="sheng">
												<option>请选择</option>
											</select>
											<span>省</span>
											<select class="shi"></select>
											<span>市</span>
											<select class="qu"></select>
											<span>区</span>


										</div>
										<p>详细地址*</p>
										<input type="text"
											style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 400px;height: 40px;">
										<p>邮编</p>
										<input type="text"
											style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 160px;height: 40px;">
										<p>手机号*</p>
										<select>
											<option value="大陆">中国大陆+86</option>
											<option value="香港">中国香港特别行政区+852</option>

										</select>
										<input type="tel" maxlength="11"
											style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 160px;height: 40px;">
										<p>为完成商品配送，我们将收集姓名、电话和收货地址等信息</p>
										<!-- <input type="button" value="确认收货地址"
											style="border: #000 solid 1px;color: #fff; width: 100px; height:40px;background-color: rgb(255, 115, 0);"> -->

									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
										<button type="button" class="btn btn-primary" onclick="exec()"
											data-dismiss="modal">确认</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="li-top">

						<h1>账号绑定</h1>
						<hr>
						<table class="table-z">
							<tr>
								<td><svg style="width:60px;height:60px;" t="1632392889917" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="2495" width="200" height="200">
										<path
											d="M511.674077 958.957635c-246.843968 0-446.954565-200.110597-446.954565-446.961728 0-246.842944 200.11162-446.954565 446.954565-446.954565s446.953541 200.11162 446.953541 446.954565C958.627618 758.848061 758.517021 958.957635 511.674077 958.957635zM666.143171 434.985976c0.130983-1.00284 0.191358-2.036379-0.027629-3.069919C647.927297 346.527294 556.733319 282.160311 453.98519 282.160311c-116.118648 0-210.593346 81.520665-210.593346 181.735088 0 53.760414 27.257807 102.201683 78.907141 140.408867l-17.996886 54.502311c-1.163499 3.550873-0.116657 7.449669 2.691295 9.893324 1.702782 1.483794 3.855818 2.269693 6.02318 2.269693 1.382487 0 2.807952-0.348947 4.116761-0.989537l67.596538-34.046421 8.322549 1.688455c20.820188 4.306072 38.788421 8.030907 60.932768 8.030907 6.517437 0 13.122879-0.290619 19.597337-0.844228 2.619664-0.233314 4.844332-1.541099 6.343475-3.461845 24.385387 61.398372 91.559299 105.743346 170.619936 105.743346 20.237927 0 40.738843-4.916986 59.144028-9.543354l52.100612 28.662807c1.381463 0.7552 2.895957 1.163499 4.409426 1.163499 2.050706 0 4.115738-0.698918 5.760191-2.066055 2.910283-2.357697 4.088108-6.256494 3.012613-9.807367l-13.314237-44.578288c44.623313-35.499515 69.094658-77.983095 69.094658-120.263038C830.754253 510.453784 756.858242 442.101024 666.143171 434.985976zM745.553779 700.067306c-3.069919 2.328022-4.365424 6.343475-3.273557 10.039657l8.685823 29.070082-35.631522-19.61371c-1.352811-0.754177-2.879584-1.163499-4.408403-1.163499-0.741897 0-1.499144 0.088004-2.225691 0.319272-19.119453 4.860704-38.875402 9.864672-58.140165 9.864672-89.419566 0-162.16538-61.892629-162.16538-137.954979 0-76.042907 72.745814-137.906883 162.16538-137.906883 87.718831 0 161.848155 63.158459 161.848155 137.906883C812.408419 628.571972 788.662599 667.448398 745.553779 700.067306zM594.997807 524.742209c-10.06831 0-20.151969 10.212596-20.151969 20.338211 0 10.193153 10.083659 20.289092 20.151969 20.289092 15.144932 0 25.154913-10.095939 25.154913-20.289092C620.15272 534.940478 610.142739 524.742209 594.997807 524.742209zM705.718515 524.742209c-9.921977 0-20.005636 10.212596-20.005636 20.338211 0 10.193153 10.083659 20.289092 20.005636 20.289092 15.08865 0 25.27157-10.095939 25.27157-20.289092C730.990085 534.940478 720.833771 524.742209 705.718515 524.742209zM470.018352 590.657454c0 12.424984 1.876744 24.441669 5.033643 36.052101-0.959861-0.233314-1.963725-0.407276-3.025916-0.319272-5.964852 0.523933-12.032034 0.757247-18.026562 0.757247-20.267603 0-37.405935-3.521197-57.222259-7.624654l-11.537777-2.357697c-1.9934-0.436952-4.073782-0.146333-5.892197 0.786922l-50.632167 25.51921 13.153578-39.806611c1.280156-3.89982-0.130983-8.147564-3.448542-10.504238-50.886971-35.7052-76.668147-79.199807-76.668147-129.264039 0-90.016153 86.22685-163.257248 192.233186-163.257248 93.696985 0 176.657442 57.411571 193.797821 133.75226C549.514917 435.68387 470.018352 505.229806 470.018352 590.657454zM388.572388 377.705388c-15.116279 0-30.379914 9.923-30.379914 25.272593 0 15.174608 15.262612 25.358551 30.379914 25.358551 15.043624 0 25.111934-10.183943 25.111934-25.358551C413.684322 387.628388 403.616012 377.705388 388.572388 377.705388zM554.709219 402.979004c0-15.349593-10.067286-25.272593-25.198915-25.272593s-30.305213 9.923-30.305213 25.272593c0.014326 15.174608 15.20326 25.358551 30.305213 25.358551C544.614304 428.337555 554.709219 418.153612 554.709219 402.979004z"
											p-id="2496"></path>
									</svg></td>
								<td>未绑定</td>
								<td><button style="width:90px;height:40px;">绑定</button></td>
							</tr>
							<tr>
								<td><svg style="width:60px;height:60px;" t="1632392929524" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="3324" width="200" height="200">
										<path
											d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m210.5 612.4c-11.5 1.4-44.9-52.7-44.9-52.7 0 31.3-16.2 72.2-51.1 101.8 16.9 5.2 54.9 19.2 45.9 34.4-7.3 12.3-125.6 7.9-159.8 4-34.2 3.8-152.5 8.3-159.8-4-9.1-15.2 28.9-29.2 45.8-34.4-35-29.5-51.1-70.4-51.1-101.8 0 0-33.4 54.1-44.9 52.7-5.4-0.7-12.4-29.6 9.4-99.7 10.3-33 22-60.5 40.2-105.8-3.1-116.9 45.3-215 160.4-215 113.9 0 163.3 96.1 160.4 215 18.1 45.2 29.9 72.8 40.2 105.8 21.7 70.1 14.6 99.1 9.3 99.7z"
											p-id="3325"></path>
									</svg></td>
								<td>未绑定</td>
								<td><button style="width:90px;height:40px;">绑定</button></td>
							</tr>
							<tr>
								<td><svg style="width:60px;height:60px;" t="1632392954365" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="4123" width="200" height="200">
										<path
											d="M342.280574 695.964872c-12.17939-0.373507-91.185792-5.564739-89.660042-75.386968l-0.002047 0c0.466628-21.243837 23.969924-78.636988 115.013477-69.206198 48.084135 4.979408 102.258988 34.075073 112.922862 39.21514 10.660804 5.140067 21.517059 10.758018 32.559557 16.85283-1.52268 1.52268-3.047406 2.953262-4.571109 4.285606-1.521656 1.333368-42.828434 40.181141-68.153216 55.226812C415.061181 681.995719 382.54051 697.200002 342.280574 695.964872zM883.155205 679.096692c-138.393977-22.093181-269.502014-84.801385-269.502014-84.801385 17.137309-22.086018 30.943756-43.605124 41.417295-64.551178 10.471492-20.944008 18.376533-39.603996 23.706935-55.976896 6.404873-18.835997 10.936073-36.732599 13.614066-53.702086l0.092098 0 0-0.568958c-0.026606 0.186242-0.062422 0.378623-0.092098 0.568958L559.387263 420.065148l0-63.406099 167.377078 0 0-27.42256L559.387263 329.23649l0-65.696258-43.988864 0c-7.231705 0-13.712303 0.573051-19.420305 1.719154-4.951779 0.759293-9.332553 2.185782-13.139252 4.281513-3.810792 2.095731-5.712095 4.855588-5.712095 8.284687l0 51.40988L314.319755 329.235466l0 27.42256 162.80597 0 0 63.406099L360.018563 420.064125l0 27.42256 247.926626 0c-0.765433 3.045359-2.474354 8.378831-5.142114 15.992229-2.665713 7.617491-6.478552 17.043165-11.426237 28.282137-4.951779 11.234879-11.236925 23.609721-18.854417 37.130665-7.614421 13.515828-16.941857 27.321252-27.990494 41.415248-5.329379-1.905396-10.469446-3.809769-15.421224-5.712095-4.952802-1.905396-9.716292-3.810792-14.281261-5.712095-11.42419-4.952802-23.51967-10.091846-36.277228-15.427364-12.756535-5.330402-26.27748-10.279111-40.558741-14.852266-14.281261-4.568039-29.228695-8.471952-44.846394-11.710716-15.613606-3.236718-31.79924-5.233188-48.555879-5.995551-17.135262-0.760317-34.180474 1.332345-51.125401 6.28003-16.944927 4.952802-32.373315 12.187577-46.272883 21.712511-13.901615 9.518794-25.233708 21.135366-33.993209 34.847669-8.755408 13.712303-13.326517 28.942169-13.70821 45.702901 0 19.419282 4.002151 36.46347 11.998265 51.123354 7.995091 14.661931 18.853393 26.850531 32.559557 36.559661 13.71128 9.711176 29.800723 17.044188 48.273447 21.991874 18.4717 4.952802 38.176484 7.43125 59.123562 7.43125l9.142218 0c1.140986 0 2.095731-0.194428 2.855024-0.573051 7.995091-0.382717 18.092054-1.239224 30.277584-2.570545 12.184507-1.338485 26.370601-4.571109 42.559305-9.711176 16.184611-5.14723 34.353412-12.567223 53.696969-23.711028 22.023596-12.691043 82.544994-61.122079 82.544994-61.122079 121.56059 54.002938 200.716394 86.878696 275.251971 103.09503-73.336262 106.876146-196.36632 176.98183-335.774393 176.98183-224.74567 0-406.938176-182.190459-406.938176-406.937153S287.255353 105.062847 512 105.062847s406.937153 182.190459 406.937153 406.937153C918.938176 571.551304 906.141732 628.117624 883.155205 679.096692z"
											p-id="4124"></path>
									</svg>
								</td>
								<td>未绑定</td>
								<td><button style="width:90px;height:40px;">绑定</button></td>
							</tr>
						</table>
					</div>
				</li>
				<li>
					<div class="li-top">
						<div class="div-h">
							<h1>会员中心</h1>
							<hr>
							<h4>更省钱！开通VIP折扣多多、福利多多</h4>
							<button style="width:180px;height:60px;margin-top: 40px;margin-bottom: 40px;">开通VIP</button>
							<p>积分兑换</p>
						</div>
					</div>
				</li>

			</div>
			<div class="clear"></div>
		</div>
	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		crossorigin="anonymous"></script>

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$('.o-m .ul-o li').hover(function () {
			var linum = $(this).index()
			$('.o-m .ul-t li').eq(linum).stop().show().siblings().hide()
		})
		$(function () {
			var slip = $('.li-mask');
			var a = $('.o-m .ul-o li:first');
			//初始化滑块
			slip.css({
				'top': parseInt(a.position().top) + 'px'
			});
			$('.o-m .ul-o li').mouseenter(function () {
				//显示滑块
				if (slip.css('display') == 'none') {
					slip.show();
				};
				//移动滑块
				slip.stop().animate({
					top: parseInt($(this).position().top) + 'px'
				}, 300);
			});
		});




		function openModal() {
			$('#myModal').modal({ backdrop: "static", keyboard: true })
		}
		function exec() {

		}



		var shengSelect = document.querySelector('.sheng');
		var shiSelect = document.querySelector('.shi');
		var quSelect = document.querySelector('.qu');

		var shenglist = ['江西', '广东', '湖北', '湖南'];
		var shilist = [['南昌', '九江', '赣江'], ['广州', '深圳', '东莞'], ['武汉', '荆门', '襄阳'], ['长沙', '邵阳', '株州']];
		var qulist = [
			[['南1区', '南2区', '南3区'], ['九1区', '九2区', '九3区'], ['赣1区', '赣2区', '赣3区']],
			[['广1区', '广2区', '广3区'], ['深1区', '深2区', '深3区'], ['东1区', '东2区']],
			[['武1区', '武2区', '武3区'], ['荆1区', '荆2区', '荆3区'], ['襄1区', '襄2区', '襄3区']],
			[['岳麓区', '雨花区', '天心区'], ['隆回', '邵阳', '塘渡口'], ['珠江河', '火车站', '高铁站']]
		];

		var index = 0;//下标

		//省
		for (var i = 0; i < shenglist.length; i++) {
			var shengOption = new Option(shenglist[i]);
			shengSelect.options.add(shengOption);
		}

		//省
		shengSelect.onchange = function (ev) {
			// console.log(ev);
			index = ev.target.selectedIndex - 1;
			// console.log(index);
			if (index == -1) {
				//选择“请选择”,让市区列表为空
				shiSelect.options.length = 0;
				quSelect.options.length = 0;
			} else {
				//再次作选择时，让市区列表为空，好重新获取市区数据
				shiSelect.options.length = 0;
				quSelect.options.length = 0;
				//在点击省时，给市添加option
				for (var j = 0; j < shilist.length; j++) {
					console.log(shilist[index][j]);
					var shiOption = new Option(shilist[index][j]);
					shiSelect.options.add(shiOption);
				}
				//给区添加option
				for (var k = 0; k < qulist[index][0].length; k++) {
					var quOption = new Option(qulist[index][0][k]);
					quSelect.options.add(quOption);
				}
			}
		};

		//市
		shiSelect.onchange = function (e) {
			var indexs = e.target.selectedIndex;
			//再次选择时，让区的列表为空，重新获取区的数据
			quSelect.options.length = 0;
			//点击市时，给区添加option
			for (var i = 0; i < qulist[index][indexs].length; i++) {
				var quOption = new Option(qulist[index][indexs][i]);
				quSelect.options.add(quOption);
			}
		}



	</script>

</body>

</html>